<div class="row">
  <div class="col-md-12">
    <div data-ng-controller="GnCssStyleSettingsController">
      <form id="gn-settings" name="gnSettings" class="form-horizontal">
      
        <div class="navbar">
          <div class="pull-right">
            <button class="btn btn-primary"
              data-ng-click="saveCssStyleSettings(gnCssStyle)">
              <span class="fa fa-save"></span> {{"saveSettings"|translate}}
            </button>
            <a target="_blank" data-ng-href="../api/customstyle"
              class="btn btn-default"> <span class="fa fa-clone"></span>
              {{"exportSettings"|translate}}
            </a>
            <button class="btn btn-default"
              data-gn-confirm-click="{{'restoreDefaultStyleConfirm' | translate}}"
              data-ng-click="restoreDefaultCssStyleSettings(gnCssStyle)">
              <span class="fa fa-history"></span>
              {{"restoreDefaultSettings"|translate}}
            </button>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
            <span data-translate="">cssstyle</span>
          </div>
          <div class="panel-body">
            
            <div class="row">
              <p data-translate="">gnCssStyleIntroMessage</p>
            </div>
            <div class="row gn-margin-bottom">
              <div class="col-md-12">
                <legend >
                  <span data-translate="">gnBackgroundCss</span>
                </legend>
              </div>
              <div class="form-row">
                <div class="col-md-9">
                  <label for="gnCssStyle.gnBackgroundImage" data-translate="">styleVariable-gnBackgroundImage</label>
                  <input class="form-control" type="text"
                    data-ng-model="gnCssStyle.gnBackgroundImage" />
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnBackgroundColor" data-translate="">styleVariable-gnBackgroundColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnBackgroundColor"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
              </div>
            </div>
            <div class="row gn-margin-bottom">
              <div class="col-md-12">
                <legend>
                  <span data-translate="">gnHeaderCss</span>
                </legend>
              </div>
              <div class="form-row">
                <div class="col-md-3">
                  <label for="gnCssStyle.gnHeaderBackground" data-translate="">styleVariable-gnHeaderBackground</label>
                  <color-picker data-ng-model="gnCssStyle.gnHeaderBackground"
                    color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnHeaderHeight" data-translate="">styleVariable-gnHeaderHeight</label>
                  <input class="form-control" type="text"
                    data-ng-model="gnCssStyle.gnHeaderHeight" />
                </div>
              </div>
            </div>
            <div class="row gn-margin-bottom">
              <div class="col-md-12">
                <legend>
                  <span data-translate="">gnMenubarCss</span>
                </legend>
              </div>
              <div class="form-row">
                <div class="col-md-3">
                  <label for="gnCssStyle.gnMenubarBackground" data-translate="">styleVariable-gnMenubarBackground</label>
                  <color-picker data-ng-model="gnCssStyle.gnMenubarBackground"
                    color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gn-menubarBackgroundActive"
                    data-translate="">styleVariable-gnMenubarBackgroundActive</label>
                  <color-picker
                    data-ng-model="gnCssStyle.gnMenubarBackgroundActive"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
                <div class="col-md-3">
                    <label for="gnCssStyle.gn-menubarColorActive"
                      data-translate="">styleVariable-gnMenubarColorActive</label>
                    <color-picker
                      data-ng-model="gnCssStyle.gnMenubarColorActive"
                      color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                  </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnMenubarColor" data-translate="">styleVariable-gnMenubarColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnMenubarColor"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnMenubarBackgroundHover" data-translate="">styleVariable-gnMenubarBackgroundHover</label>
                  <color-picker data-ng-model="gnCssStyle.gnMenubarBackgroundHover"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gn-menubarColorHover" data-translate="">styleVariable-gnMenubarColorHover</label>
                  <color-picker data-ng-model="gnCssStyle.gnMenubarColorHover"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnMenubarBorderColor" data-translate="">styleVariable-gnMenubarBorderColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnMenubarBorderColor"
                    color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                </div>
              </div>
            </div>
            <div class="row gn-margin-bottom">
              <div class="col-md-12">
                <legend>
                  <span data-translate="">gnSearchCss</span>
                </legend>
              </div>
              <div class="form-row">
                <div class="col-md-3">
                  <label for="gnCssStyle.gnSearchBackgroundColor" data-translate="">styleVariable-gnSearchBackgroundColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnSearchBackgroundColor"
                    color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnSearchOutlineColor" data-translate="">styleVariable-gnSearchOutlineColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnSearchOutlineColor"
                    color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnSearchButtonBackgroundColor" data-translate="">styleVariable-gnSearchButtonBackgroundColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnSearchButtonBackgroundColor"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnSearchButtonColor" data-translate="">styleVariable-gnSearchButtonColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnSearchButtonColor"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
              </div>
            </div>
            <div class="row gn-margin-bottom">
              <div class="col-md-12">
                <legend>
                  <span data-translate="">gnBottombarCss</span>
                </legend>
              </div>
              <div class="form-row">
                <div class="col-md-3">
                  <label for="gnCssStyle.gnBottombarBackground" data-translate="">styleVariable-gnBottombarBackground</label>
                  <color-picker data-ng-model="gnCssStyle.gnBottombarBackground"
                    color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnBottombarBackgroundHover" data-translate="">styleVariable-gnBottombarBackgroundHover</label>
                  <color-picker data-ng-model="gnCssStyle.gnBottombarBackgroundHover"
                    color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnBottombarColor" data-translate="">styleVariable-gnBottombarColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnBottombarColor"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnBottombarColorHover" data-translate="">styleVariable-gnBottombarColorHover</label>
                  <color-picker data-ng-model="gnCssStyle.gnBottombarColorHover"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
                <div class="col-md-3">
                  <label for="gnCssStyle.gnBottombarBorderColor" data-translate="">styleVariable-gnBottombarBorderColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnBottombarBorderColor"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
              </div>
            </div>
            <div class="row gn-margin-bottom">
              <div class="col-md-6">
                <legend>
                  <span data-translate="">gnTopicsCss</span>
                </legend>
                <div class="form-row">
                  <div class="col-md-6 gn-nopadding-left">
                    <label for="gnCssStyle.gnTopicsBackgroundColor"
                      data-translate="">styleVariable-gnTopicsBackgroundColor</label>
                    <color-picker data-ng-model="gnCssStyle.gnTopicsBackgroundColor"
                      color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <legend>
                  <span data-translate="">gnInfoCss</span>
                </legend>
                <div class="form-row">
                  <div class="col-md-6 gn-nopadding-left">
                    <label for="gnCssStyle.gnInfoBackgroundColor" data-translate="">styleVariable-gnInfoBackgroundColor</label>
                    <color-picker data-ng-model="gnCssStyle.gnInfoBackgroundColor"
                      color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                  </div>
                </div>
              </div>
            </div>
            <div class="row gn-margin-bottom">
              <div class="col-md-6">
                <legend>
                  <span data-translate="">gnResultcardsCss</span>
                </legend>
                <div class="form-row">
                  <div class="col-md-6 gn-nopadding-left">
                    <label for="gnCssStyle.gnResultcardBackgroundColor"
                      data-translate="">styleVariable-gnResultcardBackgroundColor</label>
                    <color-picker
                      data-ng-model="gnCssStyle.gnResultcardBackgroundColor"
                      color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                  </div>
                  <div class="col-md-6">
                    <label for="gnCssStyle.gnResultcardTitleBackgroundColor"
                      data-translate="">styleVariable-gnResultcardTitleBackgroundColor</label>
                    <color-picker
                      data-ng-model="gnCssStyle.gnResultcardTitleBackgroundColor"
                      color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <legend>
                  <span data-translate="">gnResultsCss</span>
                </legend>
                <div class="form-row">
                  <div class="col-md-6 gn-nopadding-left">
                    <label for="gnCssStyle.gnResultsBackgroundColor"
                      data-translate="">styleVariable-gnResultsBackgroundColor</label>
                    <color-picker
                      data-ng-model="gnCssStyle.gnResultsBackgroundColor"
                      color-picker-format="'hex'" color-picker-alpha="true"></color-picker>
                  </div>
                </div>
              </div>
            </div>
            <div class="row gn-margin-bottom">
              <div class="col-md-12">
                <legend>
                  <span data-translate="">gnMdViewCss</span>
                </legend>
              </div>
              <div class="form-row">
                <div class="col-md-3">
                  <label for="gnCssStyle.gnMdViewBackgroundColor"
                    data-translate="">styleVariable-gnMdViewBackgroundColor</label>
                  <color-picker data-ng-model="gnCssStyle.gnMdViewBackgroundColor"
                    color-picker-format="'hex'" color-picker-alpha="false"></color-picker>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="panel panel-default"
      data-ng-controller="GnCssStyleSettingsController">
      <div class="panel-heading">
        <span data-translate="">gnUploadCssStyle</span>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="form-row">
            <div class="col-md-9">
              <textarea name="cssJsonContent" id="cssJsonContent"
                data-ng-model="cssJsonContent" class="form-control ng-binding"></textarea>
            </div>
            <div class="col-md-3">
              <button class="btn btn-default"
                data-ng-click="uploadCssStyleSettings(cssJsonContent)">
                <span class="fa fa-magic"></span> {{"uploadSettings"|translate}}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
